<script setup  name="superAdmMenuBar">
import { ref,nextTick, onMounted } from 'vue';
import { useRouter, onBeforeRouteUpdate } from 'vue-router';
import { useSuperAdmMenuLoading } from '@/stores/superAdministrator.js';
const superAdmMenuLoading = useSuperAdmMenuLoading();
const router = useRouter();//路由实例
const currentRoutePath = ref(router.currentRoute.value.path);//当前路由路径
const menuList = ref(null);//菜单列表元素
const menuRecord = ref(-1);//记录上一次点击的item
const  menuData = ref([//菜单item渲染的数据
    {
        icon: 'icon-renwufabu',
        text: "任务发布",
        route: '/superAdministrator'
    },
    {
        icon: 'icon-chengji',
        text: '分数总览',
        route: '/superAdministrator/scoreOverview'
    },
    {
        icon: 'icon-guanliyuanguanli',
        text: '管理员管理',
        route: '/superAdministrator/adm'
    },
    {
        icon: 'icon-jiaoshiguanli',
        text: '教师管理',
        route: '/superAdministrator/teacher'
    },
    {
        icon: 'icon-xueshengguanli',
        text: '学生管理',
        route: '/superAdministrator/student'
    },
    {
        icon: 'icon-gerenzhongxin',
        text: '个人中心',
        route: '/superAdministrator/user'
    }
])
//菜单item点击事件，处理改变item颜色,进行路由跳转,加载动画
const menuClick = (index = 0) => {
    if(index === menuRecord.value) return;//防止重复点击
    for (let i = 0; i < menuList.value.children.length; i++) {
        menuList.value.children[i].classList.remove('activeMenu');
        if (index === i) {
            //加载动画
            superAdmMenuLoading.setMenuLoading(true);
            //改变item颜色
            menuList.value.children[i].classList.add('activeMenu');
            //进行路由跳转
            router.push(menuData.value[index].route);
            //记录上一次点击的item
            menuRecord.value = index;
        }
    }
};
//当切换路由时当等待组件加载完成后，关闭加载动画
onBeforeRouteUpdate(async () => {
    await nextTick();
    setTimeout(() => {
        superAdmMenuLoading.setMenuLoading(false);
    },300)
})
onMounted(() => {
    const currentRouteName = currentRoutePath.value.split('/')[2] || '';
    menuData.value.forEach((item, index) => {
        if(currentRouteName === "baseWork" || currentRouteName === "outstandingWork") {
            menuList.value.children[1].classList.add('activeMenu');
            menuRecord.value = 1;
        }
        
        if((item.route.split('/')[2] || '') === currentRouteName) {
            menuList.value.children[index].classList.add('activeMenu');
            menuRecord.value = index;
        }else {
            menuList.value.children[index].classList.remove('activeMenu');
        }
    })
})
</script>

<template>
    <div class="superAdmMenuBar">
        <div class="content">
            <!-- 占位元素 -->
            <div class="placeHolder"></div>
            <!-- 菜单内容元素 -->
            <div class="menuContent">
                <ul ref="menuList">
                    <li
                    v-for="(item,index) in menuData"
                    :key="index"
                    @click="menuClick(index)"
                    :class="index === 0 ? 'activeMenu' : ''"
                    >
                        <span class="iconfont" :class="item.icon"></span>
                        <span>{{ item.text }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use "./fonticon/superAdmMenuBar/iconfont.css";
.superAdmMenuBar {
    width: 12vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #818bbd;
    font-size: 17px;
    font-weight: 500;
    color: white;
    .content{
        width: 100%;
        height: 100%;
        background-color: #b5bbd8;
        border-bottom-left-radius: 30px;
        .placeHolder {
            height: 10vh;
            width: 100%;
        }
        .menuContent {
            width: 100%;
            height: calc(100% - 10vh);
            ul{
                position: relative;
                width: 100%;
                height: 100%;
                li{
                    width: 100%;
                    height: 7vh;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    background-color: transparent;
                    overflow: hidden;
                    white-space: nowrap;
                    transition: background-color 0.4s ease-in-out;
                    &:hover {
                        background-color: #4c5fbc;
                    }
                }
                //激活状态的背景颜色
                .activeMenu {
                    background-color: #4c5fbc;
                }
            }
        }
    }
}
</style>